import Page from "@/layout/Page"
import { ComponentProps, withSocket } from "./useSocket"
import styled from "styled-components"
import Container from "@/component/Container"
import React, { useCallback, useEffect, useRef, useState } from "react"
import { Button, Input } from "antd"
const [width, height] = [1200, 800]
const StyledContainer = styled(Container)`
    max-width:${width}px;
`
const StyledCanvas = styled.canvas`
    width:${width}px;
    height:${height}px
`
const StyledChatContainer = styled.div`
    width:300px;
    height:500px;
    position:fixed;
    top:100px;
    left:50px;
    border-rideus:5px;
    border:1px solid #ccc;
    background:#fff;
`
const StyledChatBox = styled.div`
    width:100%;
    height:400px;
    overflow-x:auto;
    overflow-y:hidden;
    border-bottom:1px solid #ccc;
`
type messageCallbackType = (props: ComponentProps & {
    state: any,
    setState: React.Dispatch<any>,
    canvas: HTMLCanvasElement,
    width: number,
    height: number
}) => void
type stateCallbackType = (props: ComponentProps & {
    state: any,
    car: CanvasRenderingContext2D,
    width: number,
    height: number
}) => void
const withGameCanvas = (
    messageCallback: messageCallbackType,
    stateCallback: stateCallbackType,
    maxNumber: number
) => {
    const result = withSocket(({
        message, send, close
    }) => {
        const ref = useRef<HTMLCanvasElement>(null)
        const [state, setState] = useState<any>(null)
        const [chat, setChat] = useState<any[]>([])
        const [msg, setMsg] = useState("")
        useEffect(() => {
            if (message.command === "chat") {
                const pid = message.pid
                const msg = message.message
                setChat([{ pid, msg }, ...chat])
                return;
            }
            messageCallback({
                width, height, message, send, close, state, setState, canvas: ref.current
            })
        }, [message])
        useEffect(() => {
            if (!state) return;
            const car = ref.current.getContext("2d")
            stateCallback({
                message, send, close, state, car, width, height
            })
        }, [state])
        const sendMsg = useCallback(() => {
            if (!msg) return;
            send({
                command: "chat",
                message: msg
            })
            setMsg("")
        }, [msg])
        return (
            <Page>
                <StyledChatContainer>
                    <StyledChatBox>
                        {chat.map((item, key) => (
                            <div key={key}>
                                {item.msg}
                            </div>
                        ))}
                    </StyledChatBox>
                    <Input.TextArea
                        value={msg}
                        onChange={({ target }) => setMsg(target.value)}
                    />
                    <Button block onClick={sendMsg}>发送</Button>
                </StyledChatContainer>
                <StyledContainer>
                    <StyledCanvas
                        width={width}
                        height={height}
                        ref={ref}
                    />
                </StyledContainer>
            </Page>
        )
    }, maxNumber)
    return result
}
export default withGameCanvas